<!-- 桌面端目录 -->
<div class="hidden lg:block flex-none md:w-56 lg:w-64 pl-8 mr-8">
    <div class="sticky" style="top: calc(var(--header-height) + 1rem)">
        <div class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-4">目录</div>
        <div class="overflow-y-auto overflow-x-auto pr-4 pageforge-scrollbar"
             style="max-height: calc(100vh - var(--header-height) - 8rem);">
            <nav class="space-y-1 inline-block min-w-full"
                 id="table-of-contents">
                <% function renderTocItem(items) { %>
                    <% items?.forEach(item => { %>
                        <div class="pl-<%= (item.level - 1) * 4 %> inline-block min-w-full">
                            <a href="#<%= item.slug %>"
                               class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link whitespace-nowrap"
                               data-slug="<%= item.slug %>">
                                <%- item.text %>
                            </a>
                        </div>
                        <% if (item.children && item.children.length > 0) { %>
                            <% renderTocItem(item.children) %>
                        <% } %>
                    <% }) %>
                <% } %>
                <% renderTocItem(pageData.toc) %>
            </nav>
        </div>
    </div>
</div>

<!-- 移动端目录按钮 -->
<button id="toc-mobile-trigger"
        class="lg:hidden fixed right-4 bottom-4 z-20 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg"
        onclick="document.getElementById('toc-mobile').classList.toggle('translate-y-full')">
    <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
    </svg>
</button>

<!-- 移动端目录 -->
<div id="toc-mobile"
     class="lg:hidden fixed bottom-0 inset-x-0 z-30 bg-white dark:bg-gray-800
                transform translate-y-full transition duration-200 ease-in-out
                p-4 rounded-t-2xl shadow-lg">
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold">目录</h3>
        <button onclick="document.getElementById('toc-mobile').classList.add('translate-y-full')"
                class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>
    <div class="overflow-y-auto overflow-x-auto"
         style="max-height: calc(60vh - var(--header-height));">
        <nav class="space-y-1 inline-block min-w-full">
            <% function renderTocItemMobile(items) { %>
                <% items?.forEach(item => { %>
                    <div class="pl-<%= (item.level - 1) * 4 %> inline-block min-w-full">
                        <a href="#<%= item.slug %>"
                           class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link whitespace-nowrap"
                           data-slug="<%= item.slug %>">
                            <%- item.text %>
                        </a>
                    </div>
                    <% if (item.children && item.children.length > 0) { %>
                        <% renderTocItemMobile(item.children) %>
                    <% } %>
                <% }) %>
            <% } %>
            <% renderTocItemMobile(locals.pageData.toc) %>
        </nav>
    </div>
</div>

<!-- 控制脚本 -->
<script>
    const tocMobile = document.getElementById('toc-mobile');
    const tocMobileTrigger = document.getElementById('toc-mobile-trigger');

    tocMobileTrigger.addEventListener('click', () => {
        tocMobile.classList.remove('translate-y-full');
    });

    document.addEventListener('click', (e) => {
        if (!tocMobile.contains(e.target) &&
            !tocMobileTrigger.contains(e.target) &&
            !tocMobile.classList.contains('translate-y-full')) {
            tocMobile.classList.add('translate-y-full');
        }
    });
</script>